<template>
	<!-- pages/user_collection/user_collection.wxml -->
	<view class="user-collection">
		<!-- Tabs -->
		<view class="tabs-container">
			<u-tabs 
			  :list="tabs" 
			  :is-scroll="false" 
			  :current="tabCurrent" 
			  font-size="28" 
			  active-color="#333333"
			  bar-width="80" 
			  :bar-style="{'background-color': '#24A3FF'}" 
			  @change="changeTab" 
			/>
		</view>

		<!-- List -->
		<view class="goods-list mt20">
			<view v-for="(item, index) in collectionList" :key="index" class="collection-item row bg-white"
				@tap="goToGoodsDetail" :data-id="item.id">
				<custom-image 
				  width="160rpx" 
				  height="160rpx" 
				  radius="6rpx" 
				  lazy-load 
				  class="mr20 goods-img"
				  :src="item.image" 
				/>
				<view class="info">
					<view class="row-between">
						<view class="name line2">{{item.name}}</view>
						<image 
						  :data-id="item.id" 
						  style="height: 56rpx;width: 56rpx;flex: none;margin-left: 14rpx"
						  src="/static/images/icon_del.png" 
						  @tap.stop="deleteConfirm" 
						/>
					</view>
					<view class="row-between mt20">
						<price-format 
						  :first-size="30" 
						  :second-size="26" 
						  :price="item.price" 
						  :weight="400"
						  :subscriptSize="30" 
						  :showSubscript="true" 
						  color="#FF2C3C" 
						/>
						<view class="btn primary br60 sm">去购买</view>
					</view>
				</view>
			</view>
			<!-- Loading -->
			<loading-footer :status="status" slotEmpty>
				<view class="data-null column-center" slot="empty">
					<image src="/static/images/profit_null.png" class="img-null" />
					<text class="sm muted">暂无收藏～</text>
				</view>
			</loading-footer>
		</view>

		<!-- Widget -->
		<view>
			<u-modal v-model="deleteSure" confirm-text="狠心删除" confirm-color="#24A3FF" :showCancelButton="true"
				:show-title="false" @confirm="cancelCollect" @cancel="deleteSure = false">
				<view class="column-center tips-dialog" style="padding: 20rpx 0;">
					<image class="icon-lg" src="/static/images/icon_warning.png"></image>
					<view style="margin-top:30rpx">确认删除该收藏吗？</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likemarket/likeshopv2
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		getCollectGoods,
		collectGoods
	} from "@/api/user";
	import { 
		getLeaseCollectGoods,
		leaseCollectGoods
	} from '@/api/lease';
	import {
		CollectType,
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"

	export default {
		data() {
			return {
				tabCurrent: 0,
				// Tabs列表
				tabs: [{
					key: 'shop',
					name: '商城商品'
				}, {
					key: 'lease',
					name: '租赁商品'
				}],
				page: 1,
				status: loadingType.LOADING,
				collectionList: [],
				collectionGoods: CollectType.COLLECTION,
				deleteSure: false,
			};
		},

		methods: {
			// 切换Tabs
			changeTab(index) {
				this.tabCurrent = index;
			},
			
			// 获取当前Tab索引
			getTabIndex() {
				const index = this.tabCurrent;
				return this.tabs[index].key;
			},
			
			// shop || lease 处理方法
			handleType({shop, lease}) {
				const type = this.getTabIndex();
				
				switch(type) {
					case 'shop': return shop();
					case 'lease': return lease();
				}
			},

			// 确认删除
			deleteConfirm(e) {
				this.id = e.currentTarget.dataset.id;
				this.deleteSure = true;
			},

			// 获取收藏列表
			getCollectGoodsFun() {
				const page = this.page;
				const collectionList = this.collectionList;
				const status = this.status;
				
				const reqMethod = (() => {
					const type = this.getTabIndex();
					switch(type) {
						case 'shop': return getCollectGoods;
						case 'lease': return getLeaseCollectGoods;
					}
				})();

				loadingFun(
				  reqMethod, 
				  page, 
				  collectionList, 
				  status
				).then(res => {
					if (res) {
						this.page = res.page;
						this.collectionList = res.dataList
						this.status = res.status
					}
				})
			},

			// 刷新
			reflesh() {
				this.collectionList = [];
				this.page = 1;
				this.status = loadingType.LOADING;
				this.getCollectGoodsFun();
			},

			// 取消收藏
			cancelCollect() {
				this.handleType({
					shop: () => {
						collectGoods({
							is_collect: CollectType.CANCEL_COLLECTION,
							goods_id: this.id
						}).then(res => {
							if (res.code == 1) {
								this.collectionList = [];
								this.page = 1;
								this.status = loadingType.LOADING;
								this.getCollectGoodsFun();
								this.deleteSure = false;
							}
						});
					},
					lease: () => {
						leaseCollectGoods({
							status: CollectType.CANCEL_COLLECTION,
							id: this.id
						}).then(res => {
							if (res.code == 1) {
								this.collectionList = [];
								this.page = 1;
								this.status = loadingType.LOADING;
								this.getCollectGoodsFun();
								this.deleteSure = false;
							}
						});
					}
				});
			},
			

			// 前往商品详情
			goToGoodsDetail(e) {
				const id = e.currentTarget.dataset.id;
				
				this.handleType({
					shop: () => {
						uni.navigateTo({
							url: '/pages/goods_details/goods_details?id=' + id
						});
					},
					lease: () => {
						uni.navigateTo({
							url: '/bundle/pages/lease_goods_details/lease_goods_details?id=' + id
						});
					}
				});
			}
		},
		
		watch: {
		    tabCurrent(value) {
				this.reflesh();
		    }
		},
		
		onLoad(options) {
			this.getCollectGoodsFun();
			getLeaseCollectGoods().then(res => {
				console.log(res);
			});
		},
		
		onReachBottom() {
			// this.getCollectGoodsFun();
			this.$nextTick(() => this.getCollectGoodsFun());
		}
	};
</script>
<style lang="scss">
	.user-collection {
		.goods-list {
			.collection-item {
				padding: 20rpx;

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.info {
					flex: 1;
				}

				.goods-img {
					width: 160rpx;
					height: 160rpx;
					flex: none;
				}

				.btn {
					width: 148rpx;
					height: 52rpx;
					right: 20rpx;
					border: 1rpx solid $-color-primary;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.del-btn {
				height: 100%;
				width: 65px;
			}

			.store-list {
				height: calc(100vh - 100rpx);
				overflow: hidden;
			}

			.store-item {
				height: 140rpx;
				border-bottom: 1rpx solid #E5E5E5;

				.store-img {
					height: 80rpx;
					width: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}

			.tips-dialog {
				height: 230rpx;
				width: 100%;
			}

			.data-null {
				padding-top: 100rpx;
			}
		}
	}
</style>
